<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@tag description="Overall Page template" pageEncoding="UTF-8"%>
<%@attribute name="pageTitle" fragment="true"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="${path}/css/bootstrap.min.css" />
        <style>
            body { padding-top: 70px; }
        </style>
        <title><jsp:invoke fragment="pageTitle" /> | Gooc, the new MOOC platform</title>
    </head>
    <body>
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Gooc</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li id="liHome"><a href="<c:url value='/'/>">Accueil</a></li>
                        <c:if test="${userId != null}">
                            <li id="liMycourses"><a href="<c:url value='/mycourses'/>">Mes cours</a></li>
                        </c:if>
                        <!--<li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Nav header</li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>-->
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <c:if test="${userId == null}">
                            <li id="liLogin"><a href="<c:url value='/login'/>">Connexion</a></li>
                            <li id="liRegister"><a href="<c:url value='/register'/>">Enregistrer</a></li>
                        </c:if>
                        <c:if test="${userId != null}">
                            <li id="liProfil"><a href="<c:url value='/profile'/>">Profile</a></li>
                            <li><a href="<c:url value='/logout'/>">Déconnexion</a></li>
                        </c:if>
                    </ul>
                </div>
            </div>
        </div>

        <div class="container">
            <c:if test="${message != null}">
                <div class="modal fade modalnow">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title">Message</h4>
                            </div>
                            <div class="modal-body">
                                <p>${message}</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                            </div>
                        </div>
                    </div>
                </div>
            </c:if>

            <jsp:doBody/>
        </div>

        <script src="${path}/js/jquery-1.11.0.min.js"></script>
        <script src="${path}/js/bootstrap.min.js"></script>
        <script>
            $(function() {
                changePageTitle(document.title.split('|')[0].trim());
            });

            function changePageTitle(title) {
                switch (title) {
                    case "Accueil":
                        $("#liHome").addClass("active");
                        break;
                    case "Connexion":
                        $("#liLogin").addClass("active");
                        break;
                    case "Enregistrer":
                        $('#liRegister').addClass("active");
                        break;
                    case "Profil":
                        $("#liProfil").addClass("active");
                        break;
                    case "Mes cours":
                        $("#liMycourses").addClass("active");
                        break;
                    default:
                        break;
                }
            }
            
            $('.modal').modal();
        </script>
    </body>
</html>